<template>
  <div class="chat-container">
    <div class="message-list-container">
      <el-auto-resizer>
        <template #default="{ height }">
          <el-scrollbar :height="height">
            <div class="message-list-box">
              <ul >
                <li v-for="(item,index) in messageList" :key="index"  >
                  <!-- 消息组件 -->
                  <!-- <Message
                  v-if="props.userInfo.item.username== item.username || item.toName == props.userInfo.item.username"
                      class="message"
                      :avatar="item.avatar"
                      :username="item.username"
                      :message="item.message"
                      :order-no="item.orderNo"
                      :component="item.component"
                      :goods-name="item.goodsName"
                      :goods-cover="item.goodsCover"
                      :mode="item.mode"
                      :key="username"/> -->

                      
                </li>
              </ul>
            </div>
          </el-scrollbar>
        </template>
      </el-auto-resizer>
    </div>
    <div class="operation-container">
      <!-- 消息输入框组件 -->
      <Operation/>
    </div>
  </div>
</template>
<script setup>

import Operation from "@/views/customer/components/Operation.vue";
import {reactive,markRaw,ref} from "vue";
import Message from "@/views/customer/components/Message.vue";
import DefaultUserAvatar from "@/assets/img/dongdong-female.png"
import RecommendMessage from "@/components/OrderMessage/index.vue"
import SimpleTextMessage from "@/components/SimpleTextMessage/index.vue"

const props = defineProps(['userInfo']);

const username = ref(props.userInfo.item.username);

console.log(username);

console.log(props.userInfo);

/**
 * 聊天记录数组
 *
 */
const messageList = reactive([
  
])
</script>
<style scoped>
.chat-container {
  height: 100%;
}

.message-list-container {
  height: calc(100% - 200px);
}

.operation-container {
  height: 200px;
  border-top: 1px solid lightgray;
}

ul, li {
  list-style: none;
  padding: 0;
}

.message-list-box {
  padding: 8px;
}
.message{
  margin-top: 8px;
}
</style>
